<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>highlight.css</title>
<meta name="generator" content="KF5::SyntaxHighlighting - Definition (CSS) - Theme (Breeze Dark)"/>
</head><body style="background-color:#232629;color:#cfcfc2"><pre>
<span style="color:#7a7c7d;">/**</span>
<span style="color:#7a7c7d;"> * This is a pseudo CSS file to test Kate's CSS syntax highlighting.</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;othersheet.css&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">screen</span>, tv;

body {
	<span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">15</span><span style="color:#2980b9;">pt</span>;
	<span style="font-weight:bold;">font-family</span>: Verdana, Helvetica, <span style="color:#f44f4f;">&quot;Bitstream Vera Sans&quot;</span>, <span style="color:#f67400;">sans-serif</span>;
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;			<span style="color:#7a7c7d;">/* yet another comment */</span>
	<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;
	<span style="color:#da4453;text-decoration:underline;">// this is no comment, it's just broken!</span>
	<span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;
	<span style="font-weight:bold;">margin-right</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;
}

<span style="color:#8e44ad;">.something</span>
{
	<span style="font-weight:bold;">margin-right</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">px</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#cdd</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">#AAFE04</span>;
	<span style="font-weight:bold;">color</span>: <span style="color:#8e44ad;">rgb(</span><span style="color:#f67400;">10</span><span style="color:#2980b9;">%</span>,<span style="color:#f67400;">30</span><span style="color:#2980b9;">%</span>,<span style="color:#f67400;">43</span><span style="color:#2980b9;">%</span><span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">maroon</span>;
}

a<span style="color:#c45b00;font-style:italic;">:hover</span> {
}

<span style="color:#27ae60;font-weight:bold;">#header</span>,
p<span style="color:#8e44ad;">.intro</span><span style="color:#c45b00;font-style:italic;">:first-letter</span>,
p<span style="color:#c45b00;font-style:italic;">:lang(nl)</span>,
img<span style="color:#0099ff;font-weight:bold;">[align</span>=<span style="color:#f44f4f;">&quot;right&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>
{
	<span style="font-weight:bold;">border</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">solid</span> Qt::<span style="color:#27aeae;font-weight:bold;">red</span> <span style="color:#2980b9;">!important</span>;
	<span style="font-weight:bold;">-moz-border-radius</span>: <span style="color:#f67400;">15</span><span style="color:#2980b9;">px</span>; <span style="color:#7a7c7d;">/* unknown properties render italic */</span>
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {

	<span style="color:#27ae60;font-weight:bold;">#header</span>
	{
		<span style="font-weight:bold;">display</span>: <span style="color:#f67400;">none</span>;
	}

}

<span style="color:#7a7c7d;">/*</span>
<span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#7a7c7d;">: add more tests, e.g. media</span>
<span style="color:#7a7c7d;">*/</span>


<span style="color:#8e44ad;">.nice-look</span> {
	<span style="font-weight:bold;">font-variant-alternates</span>: styleset<span style="color:#8e44ad;">(</span>nice-style<span style="color:#8e44ad;">)</span>;
}

ul {
	<span style="font-weight:bold;">list-style</span>: thumbs;
}

<span style="color:#7a7c7d;">/* SVG &lt;a&gt; */</span>
svg|a {}

<span style="color:#7a7c7d;">/* XHTML and SVG &lt;a&gt; */</span>
*|a {}

*{}
<span style="color:#8e44ad;">.class</span>{}
<span style="color:#27ae60;font-weight:bold;">#id</span>{}
<span style="color:#c45b00;font-style:italic;">:hover</span>{}
<span style="color:#c45b00;font-style:italic;">:lang(fr)</span>{}
E{}
E F{}
E&gt;F{}
E &gt; F{}
E~F{}
E ~ F{}
E<span style="color:#c45b00;font-style:italic;">:first-child</span>{}
E<span style="color:#c45b00;font-style:italic;">:visited</span>{}
E<span style="color:#c45b00;font-style:italic;">::after</span>{}
E<span style="color:#c45b00;font-style:italic;">:lang(c)</span>{}
E<span style="color:#c45b00;font-style:italic;">:lang(fr-ca)</span>{}
E + F{}
E+F{}
E<span style="color:#0099ff;font-weight:bold;">[foo]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>=<span style="color:#f44f4f;">warning</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>~=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>^=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>$=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[foo</span>*=<span style="color:#f44f4f;">&quot;warning&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
E<span style="color:#0099ff;font-weight:bold;">[lang</span>|=<span style="color:#f44f4f;">&quot;en&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span>{}
DIV<span style="color:#8e44ad;">.warning</span>{}
DIV <span style="color:#8e44ad;">.warning</span>{}
E<span style="color:#27ae60;font-weight:bold;">#myid</span>{}
E <span style="color:#27ae60;font-weight:bold;">#myid</span>{}
E,E{}
E, E{}
E ,E{}
E , E{}

p<span style="color:#c45b00;font-style:italic;">:nth-child(2)</span> {
	<span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">red</span>;
}

<span style="color:#7a7c7d;">/* Elements that are not &lt;div&gt; or &lt;span&gt; elements */</span>
body <span style="color:#c45b00;font-style:italic;">:not(</span>div<span style="color:#c45b00;font-style:italic;">):not(</span>span<span style="color:#c45b00;font-style:italic;">)</span> {
	<span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
}

<span style="color:#7a7c7d;">/* Elements that are not `.crazy` or `.fancy` */</span>
<span style="color:#7a7c7d;">/* Note that this syntax is not well supported yet. */</span>
body <span style="color:#c45b00;font-style:italic;">:not(</span><span style="color:#8e44ad;">.crazy</span>, <span style="color:#8e44ad;">.fancy</span><span style="color:#c45b00;font-style:italic;">)</span> {
	<span style="font-weight:bold;">font-family</span>: <span style="color:#f67400;">sans-serif</span>;
}

<span style="color:#c45b00;font-style:italic;">:nth-child(odd)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(even)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(4n)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(3n+4)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(-n+3)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }
<span style="color:#c45b00;font-style:italic;">:nth-child(n+8):nth-child(-n+15)</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>; }

<span style="color:#8e44ad;">.first</span> span<span style="color:#c45b00;font-style:italic;">:nth-child(2n+1)</span>,
<span style="color:#8e44ad;">.second</span> span<span style="color:#c45b00;font-style:italic;">:nth-child(2n+1)</span>,
<span style="color:#8e44ad;">.third</span> span<span style="color:#c45b00;font-style:italic;">:nth-of-type(2n+1)</span> {
	<span style="font-weight:bold;">background-color</span>: <span style="color:#27aeae;font-weight:bold;">lime</span>;
	unknown-property: <span style="color:#27aeae;font-weight:bold;">lime</span>;
}

<span style="color:#c45b00;font-style:italic;">:root</span>{
	<span style="color:#27aeae;">--foo</span>: if<span style="color:#8e44ad;">(</span>x &gt; <span style="color:#f67400;">5</span><span style="color:#8e44ad;">)</span> this.width = <span style="color:#f67400;">10</span>; <span style="color:#7a7c7d;">/* valid custom property, invalid in any normal property */</span>
}

<span style="color:#c45b00;font-style:italic;">:root</span>,
<span style="color:#c45b00;font-style:italic;">:root:lang(en)</span> {<span style="color:#27aeae;">--external-link</span>: <span style="color:#f44f4f;">&quot;external link&quot;</span>;}
<span style="color:#c45b00;font-style:italic;">:root:lang(de)</span> {<span style="color:#27aeae;">--external-link</span>: <span style="color:#f44f4f;">&quot;externer Link&quot;</span>;}

a<span style="color:#0099ff;font-weight:bold;">[href</span>^=<span style="color:#f44f4f;">&quot;http&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span><span style="color:#c45b00;font-style:italic;">::after</span> {<span style="font-weight:bold;">content</span>: <span style="color:#f44f4f;">&quot; (&quot;</span> <span style="color:#8e44ad;">var(</span><span style="color:#27aeae;">--external-link</span><span style="color:#8e44ad;">)</span> <span style="color:#f44f4f;">&quot;)&quot;</span>}

one   { <span style="color:#27aeae;">--foo</span>: <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span>; }
two   { <span style="color:#27aeae;">--bar</span>: <span style="color:#8e44ad;">calc(var(</span><span style="color:#27aeae;">--foo</span><span style="color:#8e44ad;">)</span> + <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; }
three { <span style="color:#27aeae;">--foo</span>: <span style="color:#8e44ad;">calc(var(</span><span style="color:#27aeae;">--bar</span><span style="color:#8e44ad;">)</span> + <span style="color:#f67400;">10</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; }
<span style="color:#8e44ad;">.foo</span> {
	<span style="color:#27aeae;">--gap</span>: <span style="color:#f67400;">20</span>;
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#8e44ad;">var(</span><span style="color:#27aeae;">--gap</span><span style="color:#8e44ad;">)</span>px; <span style="color:#7a7c7d;">/*20 px*/</span>
	<span style="font-weight:bold;">margin-top</span>: <span style="color:#8e44ad;">calc(var(</span><span style="color:#27aeae;">--gap</span><span style="color:#8e44ad;">)</span> * <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/*20px*/</span>
}

foo {
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> <span style="color:#f67400;">-8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span>%- <span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> <span style="color:#f67400;">+8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span>%+ <span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> -var<span style="color:#8e44ad;">(</span>--a<span style="color:#8e44ad;">))</span>; <span style="color:#7a7c7d;">/* invalid */</span>
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span>*<span style="color:#f67400;">-8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> - <span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> + <span style="color:#f67400;">-8</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">50</span><span style="color:#2980b9;">%</span> +(<span style="color:#f67400;">8</span><span style="color:#2980b9;">px</span>)<span style="color:#8e44ad;">)</span>;
	<span style="font-weight:bold;">width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> -(<span style="color:#8e44ad;">var(</span><span style="color:#27aeae;">--a</span><span style="color:#8e44ad;">)</span>)<span style="color:#8e44ad;">)</span>;
}

sweet-alert input<span style="color:#c45b00;font-style:italic;">:focus::-moz-placeholder</span> {
	<span style="font-weight:bold;">-webkit-transition</span>: opacity <span style="color:#f67400;">0.3</span><span style="color:#2980b9;">s</span> <span style="color:#f67400;">0.03</span><span style="color:#2980b9;">s</span> <span style="color:#f67400;">ease</span>;
	<span style="font-weight:bold;">transition</span>: opacity <span style="color:#f67400;">0.3</span><span style="color:#2980b9;">s</span> <span style="color:#f67400;">0.03</span><span style="color:#2980b9;">s</span> <span style="color:#f67400;">ease</span>;
	<span style="font-weight:bold;">opacity</span>: <span style="color:#f67400;">0.5</span>;
}


<span style="color:#27ae60;">@font-feature-values</span> Font One {
	<span style="color:#27ae60;">@styleset</span> {
		nice-style: <span style="color:#f67400;">12</span>;
	}
}

<span style="color:#27ae60;">@font-feature-values</span> Font Two {
	<span style="color:#27ae60;">@styleset</span> {
		nice-style: <span style="color:#f67400;">4</span>;
	}
}

<span style="color:#27ae60;">@counter-style</span> thumbs {
	system: cyclic;
	symbols: <span style="color:#f44f4f;">&quot;</span><span style="color:#3daee9;">\1F44D</span><span style="color:#f44f4f;">&quot;</span>;
	suffix: <span style="color:#f44f4f;">&quot; &quot;</span>;
}

<span style="color:#27ae60;">@font-face</span> {
	<span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Open Sans&quot;</span>;
	<span style="font-weight:bold;">src</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/fonts/OpenSans-Regular-webfont.woff2&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#8e44ad;">format(</span><span style="color:#f44f4f;">&quot;woff2&quot;</span><span style="color:#8e44ad;">)</span>,
	<span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/fonts/OpenSans-Regular-webfont.woff&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#8e44ad;">format(</span><span style="color:#f44f4f;">&quot;woff&quot;</span><span style="color:#8e44ad;">)</span>;
}

<span style="color:#27ae60;">@page</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">1</span><span style="color:#2980b9;">cm</span>;
}

<span style="color:#27ae60;">@page</span> <span style="color:#c45b00;font-style:italic;">:first</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">cm</span>;
	<span style="color:#7a7c7d;">/* comments */</span>
	<span style="font-weight:bold;">marks</span>: <span style="color:#f67400;">crop</span> <span style="color:#f67400;">cross</span>;
}

<span style="color:#27ae60;">@page</span> <span style="color:#c45b00;font-style:italic;">:unknown</span> {
	<span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">2</span><span style="color:#2980b9;">cm</span>;
}

<span style="color:#27ae60;">@font-face</span> {
	unknown: <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span>;
	<span style="color:#7a7c7d;">/* comments */</span>
	<span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Bitstream Vera Serif Bold&quot;</span>;
	<span style="font-weight:bold;">src</span>: <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;/static/styles/libs/font-awesome/fonts/fontawesome-webfont.fdf491ce5ff5.woff&quot;</span><span style="color:#8e44ad;">)</span>;
}

<span style="color:#27ae60;">@viewport</span> {
	<span style="font-weight:bold;">zoom</span>: <span style="color:#f67400;">0.75</span>;
	<span style="color:#7a7c7d;">/* comments */</span>
	<span style="font-weight:bold;">min-zoom</span>: <span style="color:#f67400;">0.5</span>;
	<span style="font-weight:bold;">max-zoom</span>: <span style="color:#f67400;">0.9</span>;
}

<span style="color:#27ae60;">@viewport</span> {
	<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>;
	<span style="color:#7a7c7d;">/* comments */</span>
	<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>;
}

<span style="color:#27ae60;">@document</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;https://www.example.com/&quot;</span><span style="color:#8e44ad;">)</span> {
	h1 {
		<span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">green</span>;
	}
}

<span style="color:#27ae60;">@supports</span> (<span style="font-weight:bold;">display</span>: <span style="color:#f67400;">grid</span>) {
	div {
		<span style="font-weight:bold;">display</span>: grid;
	}
}

<span style="color:#27ae60;">@media</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">600</span><span style="color:#2980b9;">px</span>) {
	<span style="color:#8e44ad;">.sidebar</span> {
		<span style="font-weight:bold;">display</span>: <span style="color:#f67400;">none</span>;
	}
}

<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;fineprint.css&quot;</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">print</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">fineprint.css</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">print</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">'bluish.css'</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">speech</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">'custom.css'</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;chrome://communicator/skin/&quot;</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#f44f4f;">&quot;common.css&quot;</span> <span style="color:#f67400;">screen</span>;
<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">'landscape.css'</span><span style="color:#8e44ad;">)</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>:<span style="color:#f67400;">landscape</span>);

<span style="color:#27ae60;">@namespace</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">http://www.w3.org/1999/xhtml</span><span style="color:#8e44ad;">)</span>;
<span style="color:#27ae60;">@namespace</span> svg <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">http://www.w3.org/2000/svg</span><span style="color:#8e44ad;">)</span>;

<span style="color:#27ae60;">@keyframes</span> important1 {
	<span style="color:#f67400;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>; }
	<span style="color:#f67400;">50%</span>  { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">150</span><span style="color:#2980b9;">px</span> <span style="color:#2980b9;">!important</span>; } <span style="color:#7a7c7d;">/* ignored */</span>
	<span style="color:#f67400;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>; }
}

<span style="color:#27ae60;">@keyframes</span> important2 {
	<span style="color:#f67400;">from</span> { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>;
		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>; }
	<span style="color:#f67400;">to</span>   { <span style="font-weight:bold;">margin-top</span>: <span style="color:#f67400;">150</span><span style="color:#2980b9;">px</span> <span style="color:#2980b9;">!important</span>; <span style="color:#7a7c7d;">/* ignored */</span>
		<span style="font-weight:bold;">margin-bottom</span>: <span style="color:#f67400;">50</span><span style="color:#2980b9;">px</span>; }
}

<span style="color:#27ae60;">@keyframes</span> slidein {
	<span style="color:#f67400;">from</span> {
		<span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
		<span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">%</span>;
	}

	<span style="color:#f67400;">to</span> {
		<span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">%</span>;
		<span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
	}
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {
	a<span style="color:#c45b00;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span> }
	<span style="color:#7a7c7d;">/* comments */</span>
	a<span style="color:#c45b00;font-style:italic;">:hover</span> { <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">red</span> }
}

<span style="color:#7a7c7d;">/*</span>
<span style="color:#7a7c7d;"> * CSS Syntax Highlight Sample File (Standard)</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * This file contains most CSS syntax, CSS3 properties, @media, @font-face and</span>
<span style="color:#7a7c7d;"> * @keyframes annotations.</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * @author  Guo Yunhe guoyunhebrave@gmail.com</span>
<span style="color:#7a7c7d;"> * @date    2016-09-16</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#7a7c7d;">/*</span>
<span style="color:#7a7c7d;"> * Block comment</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * Alert keywords:</span>
<span style="color:#7a7c7d;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#7a7c7d;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#7a7c7d;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">FIXME</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#27ae60;">@charset</span> <span style="color:#f44f4f;">&quot;UTF-8&quot;</span>;

<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;components/button.css&quot;</span><span style="color:#8e44ad;">)</span>;


<span style="color:#7a7c7d;">/* Properties */</span>

html, body {
    <span style="font-weight:bold;">font-family</span>: <span style="color:#f44f4f;">&quot;Droid Sans&quot;</span>, Arial, <span style="color:#f67400;">sans-serif</span>;
    <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">11</span><span style="color:#2980b9;">pt</span>;
    <span style="font-weight:bold;">line-height</span>: <span style="color:#f67400;">1.5</span><span style="color:#2980b9;">em</span>;
    <span style="font-weight:bold;">max-width</span>: <span style="color:#8e44ad;">calc(</span><span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span> - <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span><span style="color:#8e44ad;">)</span>;
    <span style="font-weight:bold;">background</span>: <span style="color:#27aeae;font-weight:bold;">#fff000</span>;
    <span style="font-weight:bold;">text-shadow</span>: <span style="color:#f67400;">0</span> <span style="color:#f67400;">0</span> <span style="color:#f67400;">2</span><span style="color:#2980b9;">px</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">0</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0</span>, <span style="color:#f67400;">0.3</span><span style="color:#8e44ad;">)</span>;
    <span style="font-weight:bold;">box-sizing</span>: <span style="color:#f67400;">border-box</span>;
}


<span style="color:#7a7c7d;">/* Selectors */</span>

blockquote {
    <span style="font-weight:bold;">margin</span>: <span style="color:#f67400;">0</span>;
}

header <span style="color:#27ae60;font-weight:bold;">#logo</span> {
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">px</span>;
}

div<span style="color:#27ae60;font-weight:bold;">#footer</span> <span style="color:#8e44ad;">.link</span> {
    <span style="font-weight:bold;">color</span>: <span style="color:#27aeae;font-weight:bold;">blue</span>;
}

sidebar <span style="color:#27ae60;font-weight:bold;">#subscribe</span> <span style="color:#8e44ad;">.subscribe_form</span> input<span style="color:#0099ff;font-weight:bold;">[type</span>=<span style="color:#f44f4f;">&quot;text&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span> {
    <span style="font-weight:bold;">font-size</span>: <span style="color:#f67400;">20</span><span style="color:#2980b9;">px</span>;
}

sidebar <span style="color:#27ae60;font-weight:bold;">#subscribe</span> <span style="color:#8e44ad;">.subscribe_form</span><span style="color:#c45b00;font-style:italic;">:nth-child(2n + 1):hover</span> input<span style="color:#0099ff;font-weight:bold;">[class</span>*=<span style="color:#f44f4f;">&quot;small-&quot;</span><span style="color:#0099ff;font-weight:bold;">]</span> {
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
}


<span style="color:#7a7c7d;">/* Media Queries */</span>

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">print</span> {
    <span style="color:#8e44ad;">.container</span> {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
    }
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#f67400;">768</span><span style="color:#2980b9;">px</span>) {
    <span style="color:#8e44ad;">.container</span> {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">600</span><span style="color:#2980b9;">px</span>;
    }
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">min-width</span>: <span style="color:#f67400;">768</span><span style="color:#2980b9;">px</span>) <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">960</span><span style="color:#2980b9;">px</span>) {
    <span style="color:#8e44ad;">.container</span> {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">720</span><span style="color:#2980b9;">px</span>;
    }
}


<span style="color:#7a7c7d;">/* Fontface */</span>

<span style="color:#27ae60;">@font-face</span> {
    <span style="font-weight:bold;">font-family</span>: MyHelvetica;
    <span style="font-weight:bold;">src</span>: <span style="color:#8e44ad;">local(</span><span style="color:#f44f4f;">&quot;Helvetica Neue Bold&quot;</span><span style="color:#8e44ad;">)</span>,
        <span style="color:#8e44ad;">local(</span><span style="color:#f44f4f;">&quot;HelveticaNeue-Bold&quot;</span><span style="color:#8e44ad;">)</span>,
        <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">MgOpenModernaBold.ttf</span><span style="color:#8e44ad;">)</span>;
    <span style="font-weight:bold;">font-weight</span>: <span style="color:#f67400;">bold</span>;
}

<span style="color:#7a7c7d;">/* Animation (Keyframes) */</span>

<span style="color:#27ae60;">@keyframes</span> slidein {
    <span style="color:#f67400;">from</span> {
        <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">%</span>;
    }

    <span style="color:#f67400;">to</span> {
        <span style="font-weight:bold;">margin-left</span>: <span style="color:#f67400;">0</span><span style="color:#2980b9;">%</span>;
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">100</span><span style="color:#2980b9;">%</span>;
    }
}


<span style="color:#7a7c7d;">/* Region markers */</span>

<span style="color:#2980b9;background-color:#153042;">/*BEGIN Comment */</span>



<span style="color:#2980b9;background-color:#153042;">/*END Comment */</span>

<span style="color:#7a7c7d;">/*</span>
<span style="color:#7a7c7d;"> * CSS Syntax Highlight Sample File (Complex)</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * This file contains complex CSS syntax that can test unexpected situations.</span>
<span style="color:#7a7c7d;"> *</span>
<span style="color:#7a7c7d;"> * @author  Guo Yunhe guoyunhebrave@gmail.com</span>
<span style="color:#7a7c7d;"> * @date    2016-09-16</span>
<span style="color:#7a7c7d;"> */</span>


<span style="color:#7a7c7d;">/* Comments with special content */</span>

<span style="color:#7a7c7d;">/*</span>
<span style="color:#7a7c7d;"> * .class-selector #id &quot;string&quot; 'comment' // comment {} [] ()  /* comment</span>
<span style="color:#7a7c7d;"> * </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">TODO</span><span style="color:#7a7c7d;"> </span><span style="color:#ca9219;background-color:#451e1a;font-weight:bold;">BUG</span><span style="color:#7a7c7d;"> DEBUG</span>
<span style="color:#7a7c7d;"> * body {</span>
<span style="color:#7a7c7d;"> *    margin: 0 !important;</span>
<span style="color:#7a7c7d;"> * }</span>
<span style="color:#7a7c7d;"> */</span>

<span style="color:#7a7c7d;">/* Comments in special positions */</span>

header<span style="color:#7a7c7d;">/* comment here */</span><span style="color:#8e44ad;">.active</span> <span style="color:#7a7c7d;">/* comment here */</span> {
    <span style="color:#7a7c7d;">/* comment here */</span> <span style="font-weight:bold;">color</span> : <span style="color:#7a7c7d;">/* comment here */</span> <span style="color:#27aeae;font-weight:bold;">blue</span><span style="color:#7a7c7d;">/* comment here */</span>;
    <span style="font-weight:bold;">font-family</span>: Arial <span style="color:#7a7c7d;">/* comment here */</span>,
        <span style="color:#f44f4f;">&quot;Droid Sans&quot;</span>, <span style="color:#7a7c7d;">/* comment here */</span>
        <span style="color:#f67400;">sans-serif</span><span style="color:#7a7c7d;">/* comment here */</span>;
}

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="color:#7a7c7d;">/* comment here */</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">max-width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span> <span style="color:#7a7c7d;">/* comment here */</span>) <span style="color:#7a7c7d;">/* comment here */</span> {<span style="color:#7a7c7d;">/* comment here */</span>}


<span style="color:#7a7c7d;">/* Strings with special content */</span>

<span style="color:#27ae60;">@import</span> <span style="color:#8e44ad;">url(</span><span style="color:#f44f4f;">&quot;{} $variable /* comment */&quot;</span><span style="color:#8e44ad;">)</span>;


<span style="color:#7a7c7d;">/* Without extra breaklines and spaces */</span>

pre<span style="color:#8e44ad;">.primary</span><span style="color:#c45b00;font-style:italic;">:hover</span><span style="color:#8e44ad;">.large</span><span style="color:#c45b00;font-style:italic;">:nth-child(2n-1)</span>{<span style="font-weight:bold;">font-size</span>:<span style="color:#f67400;">17</span><span style="color:#2980b9;">px</span>;<span style="font-weight:bold;">font-family</span>:<span style="color:#f44f4f;">&quot;Noto Sans&quot;</span>;<span style="font-weight:bold;">-webkit-box-shadow</span>:<span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">1</span><span style="color:#2980b9;">px</span> <span style="color:#f67400;">3</span><span style="color:#2980b9;">px</span> <span style="color:#8e44ad;">rgba(</span><span style="color:#f67400;">0</span>,<span style="color:#f67400;">0</span>,<span style="color:#f67400;">0</span>,<span style="color:#f67400;">0.3</span><span style="color:#8e44ad;">)</span>}


<span style="color:#7a7c7d;">/* With unnecessary breaklines and spaces */</span>

blockquote <span style="color:#8e44ad;">.ref</span>
    {
             <span style="font-weight:bold;">flex</span> : <span style="color:#f67400;">0</span> <span style="color:#f67400;">1</span> <span style="color:#f67400;">30</span><span style="color:#2980b9;">%</span>;
        <span style="font-weight:bold;">flex-wrap</span> : wrap;
    }

<span style="color:#27ae60;">@media</span> <span style="color:#f67400;">screen</span> <span style="font-weight:bold;">and</span> (<span style="font-weight:bold;">orientation</span>: <span style="color:#f67400;">landscape</span>) {
  <span style="color:#8e44ad;">.sidebar</span> {
    <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">500</span><span style="color:#2980b9;">px</span>; } }


<span style="color:#7a7c7d;">/* Special selectors: HTML5 allows user defined tags */</span>

header {
    flex {
        <span style="font-weight:bold;">width</span>: <span style="color:#f67400;">300</span><span style="color:#2980b9;">px</span>;
    }
}
</pre></body></html>
